<template>
  <div class="tree0" v-if="flag" @click="handlexian"></div>
  <div class="tree" v-else-if="!flag">
    <div class="title" @click="handleyin">
      <span>图层目录</span>
    </div>
    <details>
      <summary>
        <img src="../../assets/icon/wenjianjia.svg" alt="" /> 地图文档
      </summary>
      <details>
        <summary>
          <img src="../../assets/icon/wenjianjia.svg" alt="" /> 光谷智慧交通
        </summary>
        <details>
          <summary>
            <img src="../../assets/icon/wenjianjia.svg" alt="" />
            <span> 新地图</span>
          </summary>
          <div class="directory" v-for="item in children" :key="item.id">
            <input
              checked
              type="checkbox"
              @change="showLayer"
              :value="item.id"
            />
            <span class="label">
              {{ item.label }}
            </span>
          </div>
        </details>
      </details>
    </details>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { docLayer } from './Hooks/useGuangguMap'
const flag = ref(true)
/* 获取地图文档的信息 */
const docCatalog = new Zondy.Catalog.MapDoc({
  docName: 'guanggu',
})
let children = ref([])
docCatalog.getLayersInfo((data) => {
  data.value.forEach((item) => {
    let { LayerIndex, Name } = item
    children.value.push({
      id: LayerIndex,
      label: Name,
    })
  })
})
function showLayer(e) {
  const { value, checked } = e.target
  // 根据是否选中来控制图层显隐
  docLayer.setLayerStatus(value, checked ? 'include' : 'exclude')
}
function handlexian() {
  flag.value = false
}
function handleyin() {
  flag.value = true
}
</script>

<style lang="less" scoped>
@import url('./MapShow/style/DirectoryTree.css');
.tree .title {
  height: 30px;
  width: 100%;
  background-color: #2196f3;
  /* font-family: sans-serif; */
  color: #fff;
  span {
    position: absolute;
    top: 3px;
  }
}
details {
  padding-left: 20px;
  color: #666;
  margin: 10px auto;
  summary {
    img {
      width: 15px;
      height: 15px;
    }
  }
}
</style>
